<template>
  <div class="trainOrder">
    <div class="header"></div>
    <!-- 条件查询 -->
    <div class="body">
      <div class="form">
        <el-form :label-position="labelPosition" :model="formLabelAlign" :inline="true">
          <!-- <el-form-item label="会员卡号">
            <el-input size="mini" v-model="formLabelAlign.customerCard"></el-input>
          </el-form-item> -->
          
           <el-form-item label="订单号">
            <el-input size="mini" v-model="formLabelAlign.orderNumber"></el-input>
          </el-form-item>
          <el-form-item label="乘客姓名" class="el-form-item">
            <el-input size="mini" v-model="formLabelAlign.guestName"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机号">
            <el-input size="mini" v-model="formLabelAlign.linkPhone"></el-input>
          </el-form-item>
          <el-form-item label="车次">
            <el-input size="mini" v-model="formLabelAlign.trainNumber"></el-input>
          </el-form-item>
          <el-form-item label="取票号">
            <el-input size="mini" v-model="formLabelAlign.ticketNumber"></el-input>
          </el-form-item>
             <el-form-item label="退改签类别">
            <el-select size="mini" v-model="formLabelAlign.changeType"  clearable>
              <el-option label="改签" value="change"></el-option>
              <el-option label="退票" value="refund"></el-option>
            </el-select>
             </el-form-item>
          <el-form-item label="预定时间">
            <el-date-picker :value-format="format" size="mini" style="width: 150px" v-model="formLabelAlign.createTime"
              type="date">
            </el-date-picker>
            <span style="color: #525558">至</span>
            <el-date-picker :value-format="format" size="mini" style="width: 150px"
              v-model="formLabelAlign.endCreateTime" type="date">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select size="mini" v-model="formLabelAlign.status" placeholder="请选择订单状态" clearable>
              <el-option v-for="item in orderstatusList" :key="item.id" :label="item.names" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 查询按钮 -->
    <div class="btn">
      <el-button style="background-color: rgb(246, 178, 62); color: #fff" @click="search">查询订单</el-button>
      <!-- <el-button type="success">导出Excel</el-button> -->
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="dataList" border style="width: 100%">
        <el-table-column prop="orderid" label="主订单编号"> </el-table-column>
        <el-table-column prop="orderitemid" label="子订单编号">
        </el-table-column>
        <el-table-column width="90px" prop="name" label="乘客姓名">
        </el-table-column>
        <el-table-column width="90px" prop="trainNumber" label="车次">
        </el-table-column>
        <el-table-column width="80px" prop="ticketPrice" label="票价">
        </el-table-column>
        <el-table-column width="160px" prop="ticketNumber" label="票号">
        </el-table-column>
        <el-table-column width="80px" prop="differencePrice" label="改签差价">
        </el-table-column>
        <el-table-column width="90px" prop="departureTime" label="发车">
        </el-table-column>
        <el-table-column width="90px" prop="departureStationName" label="出发车站">
        </el-table-column>
        <el-table-column width="90px" prop="arrivalStationName" label="到达车站">
        </el-table-column>
        <el-table-column width="100px" prop="orderStatus" label="订单状态">
          <template slot-scope="scope"> {{scope.row.orderStatus | orderStatus}} </template>
        </el-table-column>
        <el-table-column width="100px" prop="paymentOrderStatus" label="支付状态">
          <template slot-scope="scope">
            <template v-if="scope.row.paymentOrderStatus == 'unpaid'">未支付</template>
            <template v-if="scope.row.paymentOrderStatus == 'payments'">支付中</template>
            <template v-if="scope.row.paymentOrderStatus == 'payd'"> 支付成功</template>
            <!-- <template v-if="scope.row.paymentOrderStatus == 'ticketing'">出票成功</template>
            <template v-if="scope.row.paymentOrderStatus == 'ticketFail'">出票失败</template>
            <template v-if="scope.row.paymentOrderStatus == 'cancelOrder'">取消订单</template>
            <template v-if="scope.row.paymentOrderStatus == ' changeTicket'">改签中</template>
            <template v-if="scope.row.paymentOrderStatus == 'changeTicketSuccess'">改签成功</template>
            <template v-if="scope.row.paymentOrderStatus == ' changeTicketFail'">改签失败</template>
            <template v-if="scope.row.paymentOrderStatus == ' processing'">处理中</template> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="detailsList(scope.$index, scope.row)" type="primary">详情</el-button>
            <el-button v-if="scope.row.orderStatus=='unpaid'" size="mini" type="primary"
              @click="topayfor(scope.$index, scope.row)">去支付</el-button>
            <el-button v-if="scope.row.orderStatus=='unpaid'" size="mini" type="primary"
              @click="cancelorder(scope.$index, scope.row)">取消改签</el-button>
            <el-button v-if="scope.row.orderStatus=='ticketing'" size="mini" type="primary"
              @click="handleDetails(scope.$index, scope.row)">退票</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 退票 -->
    <el-dialog title="退票" :visible.sync="cancellog" :close-on-click-modal="false" width="60%">
      <el-table size="mini" ref="multipleTable" :data="trainOrderItemList" tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="乘客姓名" width="100">
        </el-table-column>
        <el-table-column prop="idnumber" label="证件号"> </el-table-column>

        <el-table-column prop="ticketNumber" label="票号" width="160">
        </el-table-column>
        <el-table-column prop="trainBox" label="车厢号" width="120">
        </el-table-column>
        <el-table-column prop="seatNo" label="座位号" width="120">
        </el-table-column>
      </el-table>
      <el-radio-group v-model="refundway">
        <el-radio label="线上品牌商赞助">原路返回</el-radio>
        <el-radio label="线下场地免费">退至预留款</el-radio>
      </el-radio-group>
      <el-button style="background-color: #6090ec; color: #fff; margin: 10px 0 0 42%" @click="postretreatTicket">确认退票
      </el-button>
      <el-button type="primary" @click="cancellog=false">取消</el-button>
    </el-dialog>
    <!-- 取消订单 -->
    <el-dialog title="提示" :visible.sync="cancelorderVisible" width="30%">
      <span>请确认是否取消订单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelorderVisible = false">取 消</el-button>
        <el-button type="primary" @click="gettrainCancelChange">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  import flightorderVue from '../orders/flightorder.vue';
  export default {
    name: "trainOrder",
    data() {
      return {
            // 退款方式
            refundway:"",
        //分页
        golist: "",
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        showList: false,
        format: "yyyy-MM-dd",
        trainCancel: {},
        cancelorderVisible: false,
        passenger: "",
        orderItemID: [],
        train: {},
        // 乘客数组
        trainOrderItemList: [],
        //分页
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageTotal: 0,
        cancellog: false,
        size: "",
        orderstatusList: [{
            id: 'unpaid',
            names: "未支付",
          },
          {
            id: 'payments',
            names: "支付中",
          },
          {
            id: 'payd',
            names: "支付成功"
          },
          {
            id: 'ticketing',
            names: "出票成功",
          },
          {
            id: 'refundTicketSuccess',
            names: "退票成功",
          },
          {
            id: 'cancelOrder',
            names: "取消订单",
          },
          {
            id: 'changeTicket',
            names: "改签中",
          },
          {
            id: 'changeTicketSuccess',
            names: "改签成功",
          },
          {
            id: 'changeTicketFail',
            names: "改签失败",
          },
        ],
        // 返回数据
        dataList: [],
        lists: "",
        trainOrderIdList: '',
        trainOrderItem: [],
        dataollection: [],
        labelPosition: "right",
        formLabelAlign: {
          changeType:"",
          customerCard: "",
          customerName: "",
          guestName: "",
          orderNumber: "",
          linkPhone: "",
          trainNumber: "",
          status: "",
          orderPartnerNumber: "",
          ticketNumber: "",
          sourceAppId: "",
          orderType: "",
          movement: "",
          orderstatus: "",
          source: "",
          channels: "",
          createTime: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000)).toLocaleDateString().replace(/\//g, "-"),
          endCreateTime: new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
        },
        // 下拉框
        form: {
          region: "",
          ticketChannel: "",
        },
        // 表格
        tableData: [],
      };
    },
    props: {},
    components: {},
    methods: {
      detailsList(row, index) {
        console.log(row, index);
        this.fsadaf = index;
        console.log(this.fsadaf.orderid);
        this.$router.push({
          name: "trainOrderDeta",
          params: {
            fsadafList: this.fsadaf.orderid,
            type: "endorse"
          },
        });
      },
      // 去支付
      topayfor(index, row) {
        console.log(index, row)
        this.golist = row.orderid
        this.$router.push({
          name: "endorsedtopay",
          params: {
            fsadafList: this.golist,
            type: 'change'
          },
        });
      },
      cancelorder(row, index) {
        console.log(index, row);
        this.trainCancel = index;
        console.log(this.trainCancel);
        this.cancelorderVisible = true;
      },
      dateEdit() {
        console.log(
          this.formLabelAlign.createTime,
          this.formLabelAlign.endCreateTime
        );
      },
      dateEdit1() {
        console.log(
          this.formLabelAlign.createTime,
          this.formLabelAlign.endCreateTime
        );
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getqueryTrainChangeOrderList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getqueryTrainChangeOrderList();
        // orders = res.data;
      },

      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getqueryTrainChangeOrderList();
      },
      handleClose() {
        this.cancellog = false;
      },
      //订单列表接口
      getqueryTrainChangeOrderList() {
        this.$axios
          .getqueryTrainChangeOrderList({
            changeType: this.formLabelAlign.changeType,
            customerCard: this.formLabelAlign.customerCard,
            customerName: this.formLabelAlign.customerName,
            guestName: this.formLabelAlign.guestName,
            orderNumber: this.formLabelAlign.orderNumber,
            linkPhone: this.formLabelAlign.linkPhone,
            trainNumber: this.formLabelAlign.trainNumber,
            status: this.formLabelAlign.status,
            orderPartnerNumber: this.formLabelAlign.orderPartnerNumber,
            ticketNumber: this.formLabelAlign.ticketNumber,
            sourceAppId: this.formLabelAlign.sourceAppId,
            createTime: this.formLabelAlign.createTime,
            endCreateTime: this.formLabelAlign.endCreateTime,
          })
          .then((res) => {
            console.log(res);
            // debugger
            if (res.code == "200") {
              this.dataList = res.data;
              this.pageTotal = res.total;
            }
          });
      },

      // 取消订单
      gettrainCancelChange() {
        this.$axios
          .gettrainCancelChange({
            orderId: this.trainCancel.orderid,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "100") {
              cancelorderVisible = false(this.cancelorderVisible = false),
                this.$message({
                  message: '取消订单成功',
                  type: 'success'
                });
            }
          });
      },

      // 订单退票弹窗
      handleDetails(index, row) {
        this.cancellog = true;
        console.log(row);
        this.train = row;
        console.log(this.train);
        this.postqueryTrainChangeOrder();
      },
      // 当前行乘客信息
      handleSelectionChange(passengerList) {
        console.log(passengerList);
        this.trainOrderIdList = passengerList[0].orderid
        console.log(this.trainOrderIdList)
        this.passenger = passengerList[0].recordid;
        console.log(this.passenger);
        this.orderItemID.push(this.passenger);
        console.log(this.orderItemID);
      },
      // 退票申请
      postqueryTrainChangeOrder() {
        console.log(this.train.orderid);
        this.$axios
          .postqueryTrainChangeOrder({
            orderId: this.train.orderid,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.trainOrderItemList = res.data;
              console.log(this.trainOrderItemList);
            }
          });
      },
      // 退票请求
      postretreatTicket() {
        // debugger;
        this.$axios.postretreatTicket({
            trainOrderId: this.trainOrderIdList,
            recordid: this.orderItemID,
          })
          .then((res) => {
            console.log(res);

            if (res.msg=='退票请求已接收') {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.cancellog = false
               this.search();
            } else {
              this.$message.error(res.msg);
            }
          });
      },
    },
    mounted() {
      // 改签列表
      this.getqueryTrainChangeOrderList();
      this.search();
    },
  };
</script>

<style scoped>
  .header {
    width: 90%;
    height: 40px;
  }

  .body {
    width: 96%;
    margin-left: 20px;
  }

  .form {
    display: flex;
  }

  .el-form-item {
    height: 30px;
  }

  .elTable {
    background-color: #bbd9e6;
  }

  .total {
    margin: 10px;
  }

  .btn {
    margin-bottom: 20px;
    margin-left: 20px;
  }

  .table {
    margin-left: 20px;
  }
</style>